<template>
  <div>
  <div>
    <a-modal v-model:open="open" @ok="handleOk" style="width: 800px">
      <a-button type="primary" style="margin-bottom: 10px" @click="add">新增</a-button>
      <a-table :dataSource="dataSources" :columns="columns" bordered :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
              <check-circle-two-tone two-tone-color="#52c41a"/>
          </template>
          <template v-if="column.title === '操作'">
            <a-button @click="clickEdit(record)">编辑</a-button>
            <a-button danger style="margin-left: 20px" @click="clickDelete(record.id)">删除</a-button>
          </template>
        </template>
      </a-table>
      <div>
        <a-pagination
          v-model:current="formStatehats.pageNumber"
          v-model:page-size="formStatehats.pageSize"
          :page-size-options="pageSizeOptions2"
          :total="total2"
          show-size-changer
          @showSizeChange="onShowSizeChange2"
          @change="onPageChange2"
        ></a-pagination>
      </div>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:open="open1" :title="openOr ? '新增' : '编辑'"  @ok="handleOk1" style="width: 800px">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :rules="rules"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-row>
          <a-col :span="12">
            <a-form-item label="部门编号" name="departmentId">
              <a-input v-model:value="formState.departmentId" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="部门名称" name="department">
              <a-input v-model:value="formState.department" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="职位" name="jobTitle">
              <a-input v-model:value="formState.jobTitle" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="级别" name="jobLevel">
              <a-input v-model:value="formState.jobLevel" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所属组织" name="organization">
              <a-input v-model:value="formState.organization" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="分支机构" name="division">
              <a-input v-model:value="formState.division" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="上级经理" name="manager">
              <a-input v-model:value="formState.manager" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="助理" name="assistant">
              <a-input v-model:value="formState.assistant" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="成本中心" name="costCenter">
              <a-input v-model:value="formState.costCenter" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="办公地址" name="workStreetAddress">
              <a-input v-model:value="formState.workStreetAddress" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="入职时间：" name="entryDate">
              <a-date-picker v-model:value="formState.entryDate" valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择入职时间" style="width: 100%" />
            </a-form-item>
            <!-- <a-form-item label="入职时间" name="entryDate">
              <a-input v-model:value="formState.entryDate" />
            </a-form-item> -->
          </a-col>
         <a-col :span="12">
            <a-form-item label="离职时间:" name="quitDate">
              <a-date-picker v-model:value="formState.quitDate" valueFormat="YYYY-MM-DD HH:mm:ss"  format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择入职时间" style="width: 100%" />
            </a-form-item>
            <!-- <a-form-item label="离职时间" name="quitDate">
              <a-input v-model:value="formState.quitDate" />
            </a-form-item> -->
          </a-col>
          <a-col :span="12">
            <a-form-item label="工作电话" name="workPhoneNumber">
              <a-input v-model:value="formState.workPhoneNumber" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="工作邮件" name="workEmail">
              <a-input v-model:value="formState.workEmail" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="国家" name="workCountry">
              <a-input v-model:value="formState.workCountry" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="省" name="workRegion">
              <a-input v-model:value="formState.workRegion" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="城市" name="workLocality">
              <a-input v-model:value="formState.workLocality" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="地址" name="workStreetAddress">
              <a-input v-model:value="formState.workStreetAddress" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮编" name="workPostalCode">
              <a-input v-model:value="formState.workPostalCode" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="传真" name="workFax">
              <a-input v-model:value="formState.workFax" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { userApi } from '/src/api/system/user.js';
  import { message, Modal } from 'ant-design-vue';

  const openOr = ref(false);
  const open = ref(false);
  const open1 = ref(false);
  const formState = ref({
    userId: '',
    displayName: '',
    assistantId: '',
    departmentId: '',
    department: '',
    jobTitle: '',
    jobLevel: '',
    organization: '',
    division: '',
    manager: '',
    assistant: '',
    costCenter: '',
    entryDate: '',
    quitDate: '',
    workPhoneNumber: '',
    workEmail: '',
    workCountry: '',
    workRegion: '',
    workLocality: '',
    workStreetAddress: '',
    workPostalCode: '',
    workFax: '',
  });
  // 新增
  const add = () => {
    for (const key in formState.value) {
      if (formState.value.hasOwnProperty(key)) {
        formState.value[key] = ''; // 将每个字段的值设置为空
      }
    }
    openOr.value = true;
    open1.value = true;
};
  // 编辑
const clickEdit = (record) => {
  // 回显带参
  formState.value = record;
  openOr.value = false;
  open1.value = true;
};
  // 新增、编辑调用
  const handleOk1 = (e) => {
    if (openOr.value) {
      formStateadd(formState.value);
    } else {
      update(formState.value);
    }
    open1.value = false;
  };
  const showModal = () => {
    open.value = true;
  };
  const handleOk = (e) => {
    open.value = false;
  };
  async function formStateadd(formState) {
    const res = await userApi.postaddFetch(formState);
  
    if (res.code === 0) {
      message.success('添加成功');
      queryTable();
      visible.value = false;
    }
  }
  async function update(formState) {
    const res = await userApi.updateUserHats(formState);
    if (res.code === 0) {
      message.success('编辑成功');
    } else {
      message.error('编辑失败');
    }
    queryTable();
    visible.value = false;
  }
  const columns = [
    {
      title: '职位',
      dataIndex: 'jobTitle',
      key: 'jobTitle',
    },
    {
      title: '部门编码',
      dataIndex: 'departmentId',
      key: 'departmentId',
    },
    {
      title: '部门名称',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      dataIndex: 'statuss',
      key: 'statuss',
      fixed: 'right',
    },
  ];
  const formStatehats = reactive({
    jobTitle: '',
    displayName: '',
    departmentId: '',
    userId: '',
    username: '',
    assign: 'owns',
    startDate: '',
    endDate: '',
    startDatePicker: '',
    endDatePicker: '',
    pageSize: '5',
    ageSizeOptions: 5,
    pageSizeOptions: 10,
    pageSizeOptions: 20,
  });
  const dataSources = ref([]);
// 查询
  async function queryTable() {
    let res = await userApi.gethatsFetch(formStatehats);
    dataSources.value = res.data.rows;
    total2.value = res.data.records;
  }
  // const current = ref(1);
  const total2 = ref(0);
  const pageSizeRef = ref(6);
  const pageSizeOptions2 = ref(['10', '20', '30', '40']);
  const onShowSizeChange2 = (current, pageSize) => {
    pageSizeRef.value = Number(pageSize);
    queryTable();
  };

  // 操作岗位表格删除
  const clickDelete = async (value) => {
    Modal.confirm({
      title: () => '确定要删除吗?',
      content: () => '删除后不可恢复',
      onOk() {
        userApi.deleteUserHats(value).then((res) => {
          if (res.code === 0) {
            message.success('删除成功！');
            queryTable();
          }
        });
      },
      onCancel() {},
    });
  };

  // 弹框表格分页
  const onPageChange2 = (page) => {
    queryTable();
  };
  onMounted(() => {
    queryTable();
  });
  defineExpose({
    showModal,
  });
</script>
